<div class="rack-info">
    <div ng-show="rack.info.description" class="description">{{ rack.info.description }}</div>
    <table class="info">
        <tr>
            <td>Service Catalog</td>
            <td>{{ activeItem ? activeItem.service : '-' }}</td>
        </tr>
        <tr>
            <td>Hostname</td>
            <td>{{ activeItem ? activeItem.hostname : '-' }}</td>
        </tr>
        <tr>
            <td>Model</td>
            <td>{{ activeItem ? activeItem.model : '-' }}</td>
        </tr>
        <tr>
            <td>Barcode</td>
            <td>{{ activeItem ? activeItem.barcode : '-' }}</td>
        </tr>
        <tr>
            <td>SN</td>
            <td>{{ activeItem ? activeItem.sn : '-' }}</td>
        </tr>
        <tr>
            <td>Position</td>
            <td>{{ activeItem ? activeItem.position : '-' }}</td>
        </tr>
        <tr>
            <td>Height</td>
            <td>{{ activeItem ? activeItem.height : '-' }}</td>
        </tr>
        <tr>
            <td>Management</td>
            <td>
                <span ng-show="activeItem">
                    <a target="_blank" ng-show="activeItem.management_ip" href="https://{{ activeItem.management_ip }}">{{ activeItem.management_ip }}</a>
                </span>
                <span ng-hide="activeItem">-</span>
            </td>
        </tr>
        <tr>
            <td>Remarks</td>
            <td>
                {{ activeItem ? activeItem.remarks : '-' }}
                <a ng-if="activeItem._type == 'accessory'" target="_blank" href="{{ rack.info.rack_admin_url }}" >Edit</a>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <span ng-show="activeItem">
                    <a target="_blank" ng-show="activeItem.url" href="{{ activeItem.url }}">Asset information</a><br>
                    <a target="_blank" ng-show="activeItem.core_url" href="{{ activeItem.core_url }}">Configuration information</a>
                </span>
                <span ng-hide="activeItem">-</span>
            </td>
        </tr>
        <tr ng-show="activeSlot">
            <td>Slot {{ activeSlot.slot_no }}</td>
            <td>
                <table class="info slot_info">
                    <tr>
                        <td>Service Catalog</td>
                        <td>{{ activeSlot ? activeSlot.service : '-' }}</td>
                    </tr>
                    <tr>
                        <td>Hostname</td>
                        <td>{{ activeSlot ? activeSlot.hostname : '-' }}</td>
                    </tr>
                    <tr>
                        <td>Model</td>
                        <td>{{ activeSlot ? activeSlot.model : '-' }}</td>
                    </tr>
                    <tr>
                        <td>Barcode</td>
                        <td>{{ activeSlot ? activeSlot.barcode : '-' }}</td>
                    </tr>
                    <tr>
                        <td>SN</td>
                        <td>{{ activeSlot ? activeSlot.sn : '-' }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span ng-show="activeSlot">
                                <a target="_blank" ng-show="activeSlot.url" href="{{ activeSlot.url }}">Asset information</a><br>
                                <a target="_blank" ng-show="activeSlot.core_url" href="{{ activeSlot.core_url }}">Configuration information</a>
                            </span>
                            <span ng-hide="activeSlot">-</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<div class="racks">
    <rack info="rack.info" devices="rack.devices" side="front"></rack>
    <rack info="rack.info" devices="rack.devices" pdus="rack.pdus" side="back"></rack>
</div>
